import React, { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import {
    Form,
    Input,
    Button,
    Checkbox,
    Card,
    Layout,
    Row,
    Col,
    message,
    Typography,
    Image
} from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import styles from './styles.less'; // 自定义样式
import logoImg from '@/assets/images/logo.png'
import request from '@/utils/request';

const { Title } = Typography;
const { Content } = Layout;

const Page = () => {
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);
    const [captcha, setCaptcha] = useState("")

    const navigate = useNavigate();
    //获取验证图片
    const getCaptcha = async () => {
        let res = await request({
            url: '/getCaptcha',
            method: 'GET',
        });
        console.log(res)

        if (res.code === 200) {
            setCaptcha(res.data)
        }


    }

    useEffect(() => {
        getCaptcha()
    }, [])
    const onFinish = async (values) => {
        let res = await request({
            url: "/login",
            method: 'POST',
            data: {
                email: values.email,
                password: values.password,
                captcha: values.captcha
            },
        });
        if (res.code == 200) {
            localStorage.setItem('user', JSON.stringify(res.data));
            localStorage.setItem("email", res.data.email)

            message.success("登录成功！")
            navigate("/")
        }
        console.log("----", res)
    };

    return (
        <Layout className={styles["login-layout"]}>
            <Content>
                <Row justify="center" align="middle" style={{ minHeight: '100vh' }}>
                    <Col xs={24} sm={16} md={12} lg={8}>
                        <Card className={styles["login-card"]}>
                            <div className={styles["logo-container"]}>
                                <Image
                                    src={logoImg} // 或使用在线URL
                                    preview={false}
                                    width={80}
                                    height={80}
                                    alt="Logo"
                                />
                            </div>
                            <div className={styles["login-header"]}>
                                <Title level={3} className={styles["login-title"]}>
                                    若依管理系统
                                </Title>
                            </div>

                            <Form
                                form={form}
                                name="login"
                                initialValues={{ remember: true }}
                                onFinish={onFinish}
                                autoComplete="off"
                            >
                                <Form.Item
                                    name="email"
                                    rules={[
                                        { required: true, message: '请输入用户名!' },
                                        { min: 4, message: '用户名至少4个字符' },
                                        { max: 20, message: '用户名最多20个字符' }
                                    ]}
                                >
                                    <Input
                                        prefix={<UserOutlined />}
                                        placeholder="用户名"
                                        size="large"
                                    />
                                </Form.Item>

                                <Form.Item
                                    name="password"
                                    rules={[
                                        { required: true, message: '请输入密码!' },
                                        { min: 6, message: '密码至少6个字符' },
                                        { max: 20, message: '密码最多20个字符' }
                                    ]}
                                >
                                    <Input.Password
                                        prefix={<LockOutlined />}
                                        type="password"
                                        placeholder="密码"
                                        size="large"
                                    />
                                </Form.Item>
                                <Row>
                                    <div style={{ flex: 1 }}>
                                        <Form.Item
                                            name="captcha"
                                            rules={[
                                                {
                                                    required: true,
                                                    message: '请输入验证码！',
                                                },
                                            ]}
                                        >
                                            <Input
                                                prefix={<LockOutlined />}

                                                placeholder="密码"
                                                size="large"
                                            />
                                        </Form.Item>

                                    </div>
                                    <div style={{ width: "150px" }}>
                                        <div style={{ cursor: "pointer" }} onClick={getCaptcha} dangerouslySetInnerHTML={{ __html: captcha }}></div>
                                    </div>

                                </Row>




                                <Form.Item>
                                    <Form.Item name="remember" valuePropName="checked" noStyle>
                                        <Checkbox>记住我</Checkbox>
                                    </Form.Item>
                                    <a className={styles["login-form-forgot"]} href="/forgot-password">
                                        忘记密码?
                                    </a>
                                </Form.Item>

                                <Form.Item>
                                    <Button
                                        type="primary"
                                        htmlType="submit"
                                        loading={loading}
                                        block
                                        size="large"
                                    >
                                        登录
                                    </Button>
                                </Form.Item>
                            </Form>

                            <div className={styles["login-footer"]}>
                                还没有账号? <Link to="/register">立即注册</Link>
                            </div>
                        </Card>
                    </Col>
                </Row>
            </Content>
        </Layout>
    );
};

export default Page;